/*HTML document on load*/
$(document).ready(function(){
/*Default actions start*/
jQuery(".panel").lobiPanel({
reload: false,
changeStyle: false,
editTitle: false,
close: false
});
var brandModal = $('#modal_brand');
$('.brand-item').on('click', function(){
var brand_name = $(this).data('brand');
$.getJSON( "json/test.json", function( data ) {
var brand_data = data[brand_name];
$brand_details = $(".brand-details");
$brand_details.find(".brand-title").text(brand_data.company);
$brand_details.find(".brand-information .brand-address-contact span").html(brand_data.address);
$brand_details.find(".brand-information .brand-address-contact a:first").attr("href", "mailto:"+brand_data.email).text(brand_data.email);
$brand_details.find(".brand-information .brand-address-contact a:last").attr("href", brand_data.maplocal).text(brand_data.maplocal);
$brand_details.find(".brand-information .brand-address-contact a:last").attr("target", brand_data.maplocal_target);
$brand_details.find(".brand-footer a").attr("href", brand_data.link).text(brand_data.company);
$brand_details.find(".brand-footer a").attr("target", brand_data.target);
$brand_details.find(".brand-information img").attr("src", brand_data.logo);
//\img\sol\auto\cn
});
});
//config_lobipanel();
/*Default actions end*/
/*Tab Switching*/
$("#brand_tab li a[data-toggle='tab']").on('shown.bs.tab', function(e){
//config_lobipanel();
});
/*Energy Usage*/ /*(id)*/
load_energy_usage_balance("eu-energy-balance");
load_energy_usage_demand("eu-energy-demand");
load_energy_usage_supply("eu-energy-supply");
/*Hydrogen Usage*/
load_hydrogen_usage("hydrogen-usage");
/*Energy Trends*/
load_energy_trends("energy-trends");
/*Traffic Status*/
load_traffic_status("traffic-status");
/*Brand Grid*/
load_brand_grid("brand-grid");
/*Sunshine Map*/
load_energy_sunshine_map("sunshine-map");
});
/*Function - Lobi Panel Control*/
function config_lobipanel(){
$(".lobipanel").hide();
$(".tab-content").find(".active").show();
}
/*TAB #1*/
/*Function - Load Energy Usage Balance [Top-&-Center]*/
function load_energy_usage_balance(chartdiv="chartdiv"){
// Create a container
var container = am4core.create("container1", am4core.Container);
container.width = 250;
container.height = 250;
// Create a container child
var rect = container.createChild(am4core.Rectangle);
rect.width = 248;
rect.height = 248;
try {
// Themes begin
am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);
// Themes end
/** Begining of Guage #1 */
var chartMin = -50;
var chartMax = 100;
var data = {
score: 52.7,
gradingData: [
{
title: "Unsustainable",
color: "#ee1f25",
lowScore: -100,
highScore: -20,
},
{
title: "Volatile",
color: "#f04922",
lowScore: -20,
highScore: 0,
},
{
title: "Foundational",
color: "#fdae19",
lowScore: 0,
highScore: 20,
},
{
title: "Developing",
color: "#f3eb0c",
lowScore: 20,
highScore: 40,
},
{
title: "Maturing",
color: "#b0d136",
lowScore: 40,
highScore: 60,
},
{
title: "Sustainable",
color: "#54b947",
lowScore: 60,
highScore: 80,
},
{
title: "High Performing",
color: "#0f9747",
lowScore: 80,
highScore: 100,
},
],
};
/** End of Guage Ranges #1 */
/**
* Grading Lookup
*/
function lookUpGrade(lookupScore, grades) {
// Only change code below this line
for (var i = 0; i < grades.length; i++) {
if (grades[i].lowScore < lookupScore && grades[i].highScore >= lookupScore) {
return grades[i];
}
}
return null;
}
// create chart
var chart = am4core.create(chartdiv, am4charts.GaugeChart);
chart.hiddenState.properties.opacity = 0;
/* Change Size -WHOLE GAUGE ALL- Lables */ chart.fontSize = 11;
chart.innerRadius = am4core.percent(80);
chart.resizable = true;
/**
* Normal axis
*/
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = chartMin;
axis.max = chartMax;
axis.strictMinMax = true;
axis.renderer.radius = am4core.percent(80);
axis.renderer.inside = true;
axis.renderer.line.strokeOpacity = 0.1;
axis.renderer.ticks.template.disabled = false;
axis.renderer.ticks.template.strokeOpacity = 1;
axis.renderer.ticks.template.strokeWidth = 0.5;
axis.renderer.ticks.template.length = 5;
axis.renderer.grid.template.disabled = true;
axis.renderer.labels.template.radius = am4core.percent(15);
/* Change Size Guage Inner Range Lables */ axis.renderer.labels.template.fontSize = "0.9em";
/**
* Axis for ranges
*/
var axis2 = chart.xAxes.push(new am4charts.ValueAxis());
axis2.min = chartMin;
axis2.max = chartMax;
axis2.renderer.innerRadius = 10;
axis2.strictMinMax = true;
axis2.renderer.labels.template.disabled = true;
axis2.renderer.ticks.template.disabled = true;
axis2.renderer.grid.template.disabled = false;
axis2.renderer.grid.template.opacity = 0.5;
axis2.renderer.labels.template.bent = true;
axis2.renderer.labels.template.fill = am4core.color("#000");
axis2.renderer.labels.template.fontWeight = "bold";
axis2.renderer.labels.template.fillOpacity = 0.3;
/**
* Ranges
*/
for (let grading of data.gradingData) {
var range = axis2.axisRanges.create();
range.axisFill.fill = am4core.color(grading.color);
range.axisFill.fillOpacity = 0.8;
range.axisFill.zIndex = -1;
range.value = grading.lowScore > chartMin ? grading.lowScore : chartMin;
range.endValue = grading.highScore < chartMax ? grading.highScore : chartMax;
range.grid.strokeOpacity = 0;
range.stroke = am4core.color(grading.color).lighten(-0.1);
range.label.inside = true;
range.label.text = grading.title.toUpperCase();
range.label.inside = true;
range.label.location = 0.5;
range.label.inside = true;
range.label.radius = am4core.percent(10);
range.label.paddingBottom = -5; // ~half font size
/* Change Size Guage Inner Range %-Lables */ range.label.fontSize = "0.6em";
}
var matchingGrade = lookUpGrade(data.score, data.gradingData);
/**
* Label 1
*/
var label = chart.radarContainer.createChild(am4core.Label);
label.isMeasured = false;
/* Change Size Guage Inner Rolling Range Lable*/ label.fontSize = "4em";
label.x = am4core.percent(50);
label.paddingBottom = 15;
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
//label.dataItem = data;
label.text = data.score.toFixed(1);
//label.text = "{score}";
label.fill = am4core.color(matchingGrade.color);
/**
* Label 2
*/
var label2 = chart.radarContainer.createChild(am4core.Label);
label2.isMeasured = false;
/* Change Size Guage Inner Range Lables */ label2.fontSize = "2em";
label2.horizontalCenter = "middle";
label2.verticalCenter = "bottom";
label2.text = matchingGrade.title.toUpperCase();
label2.fill = am4core.color(matchingGrade.color);
/**
* Hand
*/
var hand = chart.hands.push(new am4charts.ClockHand());
hand.axis = axis2;
/*Change Size HAND LENGTH */ hand.innerRadius = am4core.percent(55);
/*Change Size HAND THICKNESS */ hand.startWidth = 8;
hand.pin.disabled = true;
hand.value = data.score;
hand.fill = am4core.color("#444");
hand.stroke = am4core.color("#000");
hand.events.on("positionchanged", function () {
label.text = axis2.positionToValue(hand.currentPosition).toFixed(1);
var value2 = axis.positionToValue(hand.currentPosition);
var matchingGrade = lookUpGrade(axis.positionToValue(hand.currentPosition), data.gradingData);
label2.text = matchingGrade.title.toUpperCase();
label2.fill = am4core.color(matchingGrade.color);
label2.stroke = am4core.color(matchingGrade.color);
label.fill = am4core.color(matchingGrade.color);
});
// Axis labels
var label0 = chart.radarContainer.createChild(am4core.Label);
label0.isMeasured = false;
label0.y = 10;
label0.horizontalCenter = "middle";
label0.verticalCenter = "top";
label0.text = "[bold]-kW·h Demand";
label0.adapter.add("x", function (x, target) {
return -(axis.renderer.pixelInnerRadius + (axis.renderer.pixelRadius - axis.renderer.pixelInnerRadius) / 2);
});
var label1 = chart.radarContainer.createChild(am4core.Label);
label1.isMeasured = false;
label1.y = 10;
label1.horizontalCenter = "middle";
label1.verticalCenter = "top";
label1.text = "[bold]+kW·h Supply";
label1.adapter.add("x", function (x, target) {
return axis.renderer.pixelInnerRadius + (axis.renderer.pixelRadius - axis.renderer.pixelInnerRadius) / 2;
});
// Add chart title
// -- Note: This is the Superscript for the No.#2: ² //
var title = chart.titles.create();
title.text = "[bold]ENERGY BALANCE";
/* Change Size Guage TITLE */ title.fontSize = 20;
title.marginBottom = 2;
setInterval(function () {
var value = chartMin + Math.random() * (chartMax - chartMin);
hand.showValue(value, 1000, am4core.ease.cubicOut);
}, 2000);
} catch (e) {
console.log(e);
}
}//end function
/*Function - Load Energy Usage Demand [Lower-Left Side]*/
function load_energy_usage_demand(chartdiv="chartdiv"){
// Create a container
var container = am4core.create("container1", am4core.Container);
container.width = 250;
container.height = 250;
// Create a container child
var rect = container.createChild(am4core.Container);
rect.width = 248;
rect.height = 248;
try {
// Themes begin
am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);
// Themes end
// Create Chart Instance
var chart = am4core.create(chartdiv, am4charts.GaugeChart);
chart.innerRadius = am4core.percent(82);
/**
* Normal axis
*/
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;
axis.renderer.radius = am4core.percent(80);
axis.renderer.inside = true;
axis.renderer.line.strokeOpacity = 1;
axis.renderer.ticks.template.disabled = false;
axis.renderer.ticks.template.strokeOpacity = 1;
axis.renderer.ticks.template.length = 10;
axis.renderer.grid.template.disabled = true;
axis.renderer.labels.template.radius = 40;
axis.renderer.labels.template.adapter.add("text", function (text) {
return text + "%";
});
/* Change Size Guage Inner% Lables */ axis.renderer.labels.template.fontSize = "0.5em";
/**
* Axis for ranges: Change the ColorSet Index: [Note: This under colorset 'Kelly']
* [range1.axisFill.fill = colorSet.getIndex(*1-X based on a 8-bit RGB color number*);]
* Kelly = No.# 7 is DkGreen | 16 is Green |
* Kelly = No.# 0 is Golden Yellow | 2 is Orange |
* [ Adjust this line expl.: range0.axisFill.fill = colorSet.getIndex(16); ]
*/
var colorSet = new am4core.ColorSet();
var axis2 = chart.xAxes.push(new am4charts.ValueAxis());
axis2.min = 0;
axis2.max = 100;
axis2.strictMinMax = true;
axis2.renderer.labels.template.disabled = true;
axis2.renderer.ticks.template.disabled = true;
axis2.renderer.grid.template.disabled = true;
var range0 = axis2.axisRanges.create();
range0.value = 0;
range0.endValue = 50;
range0.axisFill.fillOpacity = 1;
range0.axisFill.fill = colorSet.getIndex(0);
var range1 = axis2.axisRanges.create();
range1.value = 50;
range1.endValue = 100;
range1.axisFill.fillOpacity = 1;
range1.axisFill.fill = colorSet.getIndex(2);
/**
* Label
*/
var label = chart.radarContainer.createChild(am4core.Label);
label.isMeasured = false;
/*Change Size Guage Inner Rolling Range Lable */ label.fontSize = 14;
label.x = am4core.percent(50);
label.y = am4core.percent(100);
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.text = "50%";
/**
* Hand
*/
var hand = chart.hands.push(new am4charts.ClockHand());
hand.axis = axis2;
/*Change Size HAND LENGTH */ hand.innerRadius = am4core.percent(55);
/*Change Size HAND THICKNESS */ hand.startWidth = 4;
hand.pin.disabled = true;
hand.value = 50;
hand.events.on("propertychanged", function (ev) {
range0.endValue = ev.target.value;
range1.value = ev.target.value;
label.text = axis2.positionToValue(hand.currentPosition).toFixed(1);
axis2.invalidate();
});
setInterval(function () {
var value = Math.round(Math.random() * 100);
var animation = new am4core.Animation(
hand,
{
property: "value",
to: value,
},
1000,
am4core.ease.cubicOut
).start();
}, 2000);
} catch (e) {
console.log(e);
}
// Axis labels
var label0 = chart.radarContainer.createChild(am4core.Label);
label0.isMeasured = false;
label0.y = 10;
label0.horizontalCenter = "middle";
label0.verticalCenter = "top";
label0.text = "[bold]-kW·h";
/*Change Size Guage AXIS FOOT Lable0 */ label0.fontSize = "0.6em";
label0.adapter.add("x", function (x, target) {
return -(axis.renderer.pixelInnerRadius + (axis.renderer.pixelRadius - axis.renderer.pixelInnerRadius) / 2);
});
var label1 = chart.radarContainer.createChild(am4core.Label);
label1.isMeasured = false;
label1.y = 10;
label1.horizontalCenter = "middle";
label1.verticalCenter = "top";
label1.text = "[bold]+kW·h"
/*Change Size Guage AXIS FOOT Lable1 */ label1.fontSize = "0.6em";
label1.adapter.add("x", function (x, target) {
return axis.renderer.pixelInnerRadius + (axis.renderer.pixelRadius - axis.renderer.pixelInnerRadius) / 2;
});
// Add chart title
// -- Note: This is the Superscript for the No.#2: ² | Kilowatt Hour - kW·h //
var title = chart.titles.create();
title.text = "[bold]kW·h DEMAND";
/*Change Size Guage TITLE */ title.fontSize = 16;
title.marginBottom = 2;
}
/*Function - Load Energy Usage Supply [Lower Right Side]*/
function load_energy_usage_supply(chartdiv="chartdiv"){
// Create a container
var container = am4core.create("container1", am4core.Container);
container.width = 250;
container.height = 250;
// Create a container child
var rect = container.createChild(am4core.Rectangle);
rect.width = 248;
rect.height = 248;
try {
// Themes begin
am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);
// Themes end
// Create Chart Instance
var chart = am4core.create(chartdiv, am4charts.GaugeChart);
chart.innerRadius = am4core.percent(82);
/**
* Normal axis
*/
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;
axis.renderer.radius = am4core.percent(80);
axis.renderer.inside = true;
axis.renderer.line.strokeOpacity = 1;
axis.renderer.ticks.template.disabled = false;
axis.renderer.ticks.template.strokeOpacity = 1;
axis.renderer.ticks.template.length = 10;
axis.renderer.grid.template.disabled = true;
axis.renderer.labels.template.radius = 40;
axis.renderer.labels.template.adapter.add("text", function (text) {
return text + "%";
});
/* Change Size Guage Inner% Lables */ axis.renderer.labels.template.fontSize = "0.5em";
/**
* Axis for ranges: Change the ColorSet Index: [Note: This under colorset 'Kelly']
* [range1.axisFill.fill = colorSet.getIndex(*1-X based on a 8-bit RGB color number*);]
* Kelly = No.# 7 is DkGreen | 16 is Green |
* Kelly = No.# 0 is Golden Yellow | 2 is Orange |
* [ Adjust this line expl.: range0.axisFill.fill = colorSet.getIndex(16); ]
*/
var colorSet = new am4core.ColorSet();
var axis2 = chart.xAxes.push(new am4charts.ValueAxis());
axis2.min = 0;
axis2.max = 100;
axis2.strictMinMax = true;
axis2.renderer.labels.template.disabled = true;
axis2.renderer.ticks.template.disabled = true;
axis2.renderer.grid.template.disabled = true;
var range0 = axis2.axisRanges.create();
range0.value = 0;
range0.endValue = 50;
range0.axisFill.fillOpacity = 1;
range0.axisFill.fill = colorSet.getIndex(16);
var range1 = axis2.axisRanges.create();
range1.value = 50;
range1.endValue = 100;
range1.axisFill.fillOpacity = 1;
range1.axisFill.fill = colorSet.getIndex(7);
/**
* Label
*/
var label = chart.radarContainer.createChild(am4core.Label);
label.isMeasured = false;
/*Change Size Guage Inner Rolling Range Lables */ label.fontSize = 14;
label.x = am4core.percent(50);
label.y = am4core.percent(100);
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.text = "50%";
/**
* Hand
*/
var hand = chart.hands.push(new am4charts.ClockHand());
hand.axis = axis2;
/*Change Size HAND LENGTH */ hand.innerRadius = am4core.percent(55);
/*Change Size HAND THICKNESS */ hand.startWidth = 4;
hand.pin.disabled = true;
hand.value = 50;
hand.events.on("propertychanged", function (ev) {
range0.endValue = ev.target.value;
range1.value = ev.target.value;
label.text = axis2.positionToValue(hand.currentPosition).toFixed(1);
axis2.invalidate();
});
setInterval(function () {
var value = Math.round(Math.random() * 100);
var animation = new am4core.Animation(
hand,
{
property: "value",
to: value,
},
1000,
am4core.ease.cubicOut
).start();
}, 2000);
} catch (e) {
console.log(e);
}
// Axis labels
var label0 = chart.radarContainer.createChild(am4core.Label);
label0.isMeasured = false;
label0.y = 10;
label0.horizontalCenter = "middle";
label0.verticalCenter = "top";
label0.text = "[bold]-kW·h";
/*Change Size Guage AXIS FOOT Lable0 */ label0.fontSize = "0.6em";
label0.adapter.add("x", function (x, target) {
return -(axis.renderer.pixelInnerRadius + (axis.renderer.pixelRadius - axis.renderer.pixelInnerRadius) / 2);
});
var label1 = chart.radarContainer.createChild(am4core.Label);
label1.isMeasured = false;
label1.y = 10;
label1.horizontalCenter = "middle";
label1.verticalCenter = "top";
label1.text = "[bold]+kW·h"
/*Change Size Guage AXIS FOOT Lable1 */ label1.fontSize = "0.6em";
label1.adapter.add("x", function (x, target) {
return axis.renderer.pixelInnerRadius + (axis.renderer.pixelRadius - axis.renderer.pixelInnerRadius) / 2;
});
// Add chart title
// -- Note: This is the Superscript for the No.#2: ² | Kilowatt Hour - kW·h //
var title = chart.titles.create();
title.text = "[bold]kW·h SUPPLY";
/*Change Size Guage TITLE */ title.fontSize = 16;
title.marginBottom = 2;
}
/*Function - Load Hydrogen Usage*/
function load_hydrogen_usage(chartdiv="chartdiv"){
// Create a container
var container = am4core.create("container1", am4core.Container);
container.width = 650;
container.height = 450;
// Create a container child
var rect = container.createChild(am4core.Rectangle);
rect.width = 648;
rect.height = 448;
// Create chart instance - Set Cylinder colors below
try {
function am4themes_myTheme(target) {
if (target instanceof am4core.ColorSet) {
target.list = [
am4core.color("#FF0F00"),
am4core.color("#FCD202"),
am4core.color("#04D215"),
am4core.color("#0D8ECF")];
}
}
// Set type of chart instance Theme
am4core.useTheme(am4themes_myTheme);
// Create chart instance
var chart = am4core.create(chartdiv, am4charts.XYChart3D);
chart.titles.create().text = "[font-size:20px]Liquid Hydrogen Reserves";
// Add data - Value 1+2 must equal 100
chart.data = [
{
category: "H2 Liquid",
value1: 75,
value2: 25,
},
{
category: "H2 Compressed Gas",
value1: 15,
value2: 85,
},
{
category: "H2 In Transit",
value1: 40,
value2: 60,
},
{
category: "H2 Onboard Vehicals",
value1: 55,
value2: 45,
},
];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.grid.template.strokeOpacity = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.strokeOpacity = 0;
valueAxis.min = -10;
valueAxis.max = 110;
valueAxis.strictMinMax = true;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.labels.template.adapter.add("text", function (text) {
if (text > 100 || text < 0) {
return "";
} else {
return text + "%";
}
});
// Create and Configure Series
var series1 = chart.series.push(new am4charts.ConeSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.categoryX = "category";
series1.tooltip.label.textAlign = "middle";
series1.tooltip.pointerOrientation = "down";
series1.tooltip.dy = -5;
series1.columns.template.tooltipText = "[/]\n[font-size:12px] @ {valueY}%";
series1.columns.template.showTooltipOn = "always";
series1.columns.template.tooltipY = 0;
series1.columns.template.width = am4core.percent(68);
series1.columns.template.fillOpacity = 0.9;
series1.columns.template.strokeOpacity = 1;
series1.columns.template.strokeWidth = 2;
series1.columns.template.adapter.add("fill", function(fill, target) {
return chart.colors.getIndex(target.dataItem.index);
});
series1.columns.template.adapter.add("stroke", function(fill, target) {
return chart.colors.getIndex(target.dataItem.index);
});
var series2 = chart.series.push(new am4charts.ConeSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "category";
series2.columns.template.tooltipText = "[/]\n[font-size:12px] Down -{valueY}%";
series2.stacked = true;
series2.columns.template.width = am4core.percent(68);
series2.columns.template.fill = am4core.color("#000");
series2.columns.template.fillOpacity = 0.1;
series2.columns.template.stroke = am4core.color("#000");
series2.columns.template.strokeOpacity = 0.2;
series2.columns.template.strokeWidth = 2;
} catch (e) {
console.log(e);
}
}// end function
/*Function - Load Energy Trends*/
function load_energy_trends(chartdiv="chartdiv"){
// Create chart instance - Set colors below
try {
function am4themes_myTheme(target) {
if (target instanceof am4core.ColorSet) {
target.list = [
am4core.color("#FF0F00")];
}
}
// Create a Chart Instance
var chartData = generateChartData();
function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 0);
firstDate.setHours(0, 0, 0, 0);
var a = 2020;
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
a += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
var b = Math.round(Math.random() * 100000000);
chartData.push({
date: newDate,
value: a,
volume: b,
});
}
return chartData;
}
var chart = AmCharts.makeChart(chartdiv, {
type: "stock",
theme: "light",
categoryAxesSettings: {
minPeriod: "mm",
},
dataSets: [
{
// Color set above at Chart Instance - Color below will over-ride it
color: "",
fieldMappings: [
{
fromField: "value",
toField: "value",
},
{
fromField: "volume",
toField: "volume",
},
],
dataProvider: chartData,
categoryField: "date",
},
],
panels: [
{
showCategoryAxis: false,
title: "Trend Σ Energy Balance [+/-] of Electricity & H² Systems",
percentHeight: 70,
stockGraphs: [
{
id: "g1",
valueField: "value",
type: "smoothedLine",
lineThickness: 2,
bullet: "round",
},
],
stockLegend: {
valueTextRegular: " ",
markerType: "none",
},
},
{
title: "Trending",
percentHeight: 30,
stockGraphs: [
{
valueField: "volume",
type: "column",
cornerRadiusTop: 2,
fillAlphas: 1,
},
],
stockLegend: {
valueTextRegular: " ",
markerType: "none",
},
},
],
chartScrollbarSettings: {
graph: "g1",
usePeriod: "10mm",
position: "top",
},
chartCursorSettings: {
valueBalloonsEnabled: true,
},
// To remove the TOP Date and Period Selector, delet top from the: position: "top", statment below.
// To reinstate the TOP Date and Period Selector type top in the: position: "top", statment below.
periodSelector: {
position: " ",
dateFormat: "YYYY-MM-DD JJ:NN",
inputFieldWidth: 125,
/* PERIOD SELECTOR is OFFLINE, To restore it Un-Comment this.
periods: [
{
period: "hh",
count: 1,
label: "1 hour",
},
{
period: "hh",
count: 4,
label: "4 hours",
},
{
period: "hh",
count: 8,
selected: true,
label: "8 hour",
},
{
period: "hh",
count: 12,
label: "12 hours",
},
{
period: "MAX",
label: "MAX",
},
],
Period Selector OFFLINE, Un-Comment to restore */
},
panelsSettings: {
usePrefixes: true,
},
});
} catch (e) {
console.log(e);
}
}// end function
/*Function - Load Traffic Status*/
function load_traffic_status(chartdiv="chartdiv"){
// Create a container
var container = am4core.create("container1", am4core.Container);
container.width = 650;
container.height = 450;
// Create a container child
var rect = container.createChild(am4core.Rectangle);
rect.width = 648;
rect.height = 448;
// Set Chart Line colors below
function am4themes_myTheme(target) {
if (target instanceof am4core.ColorSet) {
target.list = [
am4core.color("#FF0F00"),
am4core.color("#FCD202"),
am4core.color("#04D215")];
}
}
// Set type of chart instance Theme
am4core.useTheme(am4themes_myTheme);
am4core.useTheme(am4themes_animated);
// Create Chart Instance
var chart = am4core.create(chartdiv, am4charts.XYChart);
// Add data
chart.data = [
{
date: new Date(2020, 0, 1, 0),
value: 450,
value2: 362,
value3: 699,
},
{
category: "One",
demand: 121,
supply: 255,
},
{
date: new Date(2020, 0, 1, 1),
value: 269,
value2: 450,
value3: 841,
},
{
category: "Two",
demand: 211,
supply: 153,
},
{
date: new Date(2020, 0, 1, 2),
value: 700,
value2: 358,
value3: 699,
},
{
category: "Three",
demand: 330,
supply: 350,
},
{
date: new Date(2020, 0, 1, 3),
value: 490,
value2: 367,
value3: 500,
},
{
category: "Four",
demand: 411,
supply: 501,
},
{
date: new Date(2020, 0, 1, 4),
value: 500,
value2: 485,
value3: 369,
},
{
category: "Five",
demand: 323,
supply: 155,
},
{
date: new Date(2020, 0, 1, 5),
value: 550,
value2: 354,
value3: 250,
},
{
category: "Six",
demand: 289,
supply: 377,
},
{
date: new Date(2020, 0, 1, 6),
value: 420,
value2: 350,
value3: 600,
},
{
category: "Seven",
demand: 210,
supply: 480,
},
{
date: new Date(2020, 0, 1, 7),
value: 490,
value2: 367,
value3: 500,
},
{
category: "Eight",
demand: 121,
supply: 255,
},
{
date: new Date(2020, 0, 1, 8),
value: 269,
value2: 450,
value3: 841,
},
{
category: "Nine",
demand: 211,
supply: 153,
},
{
date: new Date(2020, 0, 1, 9),
value: 450,
value2: 362,
value3: 699,
},
{
category: "Ten",
demand: 330,
supply: 350,
},
{
date: new Date(2020, 0, 1, 10),
value: 550,
value2: 354,
value3: 250,
},
{
category: "Eleven",
demand: 411,
supply: 501,
},
{
date: new Date(2020, 0, 1, 11),
value: 500,
value2: 485,
value3: 369,
},
{
category: "Twelve",
demand: 323,
supply: 155,
},
{
date: new Date(2020, 0, 1, 12),
value: 500,
value2: 485,
value3: 369,
},
{
category: "Thirteen",
demand: 289,
supply: 377,
},
];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 1;
dateAxis.renderer.minGridDistance = 50;
dateAxis.startLocation = 0;
dateAxis.endLocation = 0;
dateAxis.renderer.labels.template.location = 0.0001;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create Container for TOP TITLES
var topContainer = chart.chartContainer.createChild(am4core.Container);
topContainer.layout = "absolute";
topContainer.toBack();
topContainer.paddingBottom = 15;
topContainer.width = am4core.percent(100);
// Create top Title [Left side]
var axisTitle = topContainer.createChild(am4core.Label);
axisTitle.text = "Total Vehicals";
axisTitle.fontWeight = 600;
axisTitle.align = "left";
axisTitle.paddingLeft = 10;
// Create top Title [Center]
var axisTitle = topContainer.createChild(am4core.Label);
axisTitle.text = "Vehical Status";
axisTitle.fontWeight = 600;
axisTitle.align = "center";
axisTitle.paddingLeft = 10;
// Create top Title [Right side]
var dateTitle = topContainer.createChild(am4core.Label);
dateTitle.text = "Trending 2020";
dateTitle.fontWeight = 600;
dateTitle.align = "right";
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.name = name;
series.tooltipText = "{dateX}: [b]{valueY}[/]";
series.strokeWidth = 2;
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
}
createSeries("value", "Active Vehicals");
createSeries("value2", "Vehicals Charging");
createSeries("value3", "Parked Vehicals");
chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
chart.scrollbarX = new am4charts.XYChartScrollbar();
/*const scrollbarX = this.chart.scrollbarX*/
} // end function
/*Function - Load Traffic Status*/
function load_brand_grid(chartdiv="chartdiv"){
// Create a container
var container = am4core.create("container1", am4core.Container);
container.width = 650;
container.height = 450;
// Create a container child
var rect = container.createChild(am4core.Rectangle);
rect.width = 648;
rect.height = 448;
am4core.useTheme(am4themes_animated);
var data = {
Acura: {
ILX: 11757,
MDX: 54886,
NSX: 581,
RDX: 51295,
RLX: 1237,
TLX: 34846,
},
"Alfa Romeo": { "4C": 407, Giulia: 8903, Stelvio: 2721 },
Audi: {
A3: 20733,
"A3 e-tron": 2877,
A4: 37674,
A5: 21301,
A6: 16304,
A7: 4810,
A8: 3127,
Q3: 20633,
Q5: 57640,
Q7: 38346,
R8: 772,
TT: 2294,
},
Bentley: {
Bentayga: 1152,
"Continental GT": 898,
"Flying Spur": 257,
Mulsanne: 98,
},
BMW: {
"2-Series": 11737,
"3-Series": 59449,
"4-Series": 39634,
"5-Series": 40658,
"6-Series": 3355,
"7-Series": 9276,
i3: 6276,
i8: 488,
X1: 30826,
X3: 40691,
X4: 5198,
X5: 50815,
X6: 6780,
Z4: 502,
},
Buick: {
Cascada: 5595,
Enclave: 48564,
Encore: 88035,
Envision: 41040,
LaCrosse: 20161,
Regal: 11559,
Verano: 4277,
},
Cadillac: {
ATS: 13100,
CT6: 10542,
CTS: 10344,
ELR: 17,
Escalade: 37694,
SRX: 156,
XT5: 68312,
XTS: 16275,
},
Chevrolet: {
Bolt: 23297,
Camaro: 67940,
"Caprice PPV": 693,
"City Express": 8348,
Colorado: 112996,
Corvette: 25079,
Cruze: 184751,
Equinox: 290458,
Express: 69164,
Impala: 75877,
Malibu: 185857,
Silverado: 585864,
Sonic: 30290,
Spark: 22589,
SS: 4055,
Suburban: 56516,
Tahoe: 98961,
Traverse: 123506,
Trax: 79289,
Volt: 20349,
},
Chrysler: {
"200": 18457,
"300": 51237,
Pacifica: 118274,
"Town & Country": 577,
},
Dodge: {
Avenger: 14,
Challenger: 64537,
Charger: 88351,
Dart: 10082,
Durango: 68761,
"Grand Caravan": 125196,
Journey: 89470,
Viper: 585,
"RAM P/U": 500723,
"RAM ProMaster": 40483,
"RAM ProMaster City": 15584,
},
Fiat: { "124 Spider": 4478, "500": 12685, "500L": 1664, "500X": 7665 },
Ford: {
"C-Max": 18390,
Edge: 142603,
Escape: 308296,
"E-Series": 53304,
Expedition: 51883,
Explorer: 271131,
Fiesta: 46249,
Flex: 22389,
Focus: 158385,
"F-Series": 896764,
Fusion: 209623,
GT: 89,
Mustang: 81866,
Taurus: 41236,
Transit: 127360,
"Transit Connect": 34473,
},
Genesis: { G80: 16196, G90: 4398 },
GMC: {
Acadia: 111276,
Canyon: 32106,
Savana: 29679,
Sierra: 217943,
Terrain: 85441,
Yukon: 49183,
"Yukon XL": 35059,
},
Honda: {
Accord: 322655,
Civic: 377286,
"Clarity FCV": 2455,
Crosstour: 5,
"CR-V": 377895,
"CR-Z": 705,
Fit: 49454,
"HR-V": 94034,
Insight: 3,
Odyssey: 100307,
Pilot: 127279,
Ridgeline: 34749,
},
Hyundai: {
Accent: 58955,
Azera: 3060,
Elantra: 198210,
Equus: 20,
Genesis: 1152,
Ioniq: 11197,
"Santa Fe": 133171,
Sonata: 131803,
Tucson: 114735,
Veloster: 12658,
},
Infiniti: {
Q50: 40739,
Q60: 10751,
Q70: 5772,
QX30: 14093,
QX50: 16857,
QX60: 40444,
QX70: 6878,
QX80: 17881,
},
Jaguar: { "F-Pace": 18946, "F-Type": 4108, XE: 9278, XF: 4541, XJ: 2721 },
Jeep: {
Cherokee: 169882,
Compass: 83253,
"Grand Cherokee": 240696,
Patriot: 10735,
Renegade: 103434,
Wrangler: 190522,
},
Kia: {
Cadenza: 7249,
Forte: 117596,
K900: 455,
Niro: 27237,
Optima: 107493,
Rio: 16760,
Sedona: 23815,
Sorento: 99684,
Soul: 115712,
Sportage: 72824,
Stinger: 843,
},
"Land Rover": {
"Discovery / LR4": 6398,
"Discovery Sport": 14187,
"Range Rover": 16869,
"Range Rover Evoque": 11979,
"Range Rover Sport": 19153,
"Range Rover Velar": 6153,
},
Lexus: {
CT: 4690,
ES: 51398,
GS: 7773,
GX: 27190,
IS: 26482,
LC: 2487,
LFA: 3,
LS: 4094,
LX: 6004,
NX: 59341,
RC: 7363,
RX: 108307,
},
Lincoln: {
Continental: 12012,
MKC: 27048,
MKS: 153,
MKT: 3005,
MKX: 31031,
MKZ: 27387,
Navigator: 10523,
},
Maserati: {
Ghibli: 5531,
GranTurismo: 1018,
Levante: 5448,
Quattroporte: 1700,
},
Mazda: {
"3": 75018,
"5": 10,
"6": 33402,
"CX-3": 16355,
"CX-5": 127563,
"CX-9": 25828,
"MX-5 Miata": 11294,
},
"Mercedes-Benz": {
"B-Class": 744,
"C-Class": 77447,
"CLA-Class": 20669,
"E / CLS-Class": 51312,
"G-Class": 4188,
"GLA-Class": 24104,
"GLC-Class": 48643,
"GLE-Class": 54595,
"GLS-Class": 32248,
Metris: 7579,
"S-Class": 15888,
"SLC-Class": 2860,
"SL-Class": 2940,
Sprinter: 27415,
},
Mini: { Cooper: 32232, Countryman: 14864, Paceman: 9 },
Mitsubishi: {
"i MiEV": 6,
Lancer: 12725,
Mirage: 22386,
Outlander: 35310,
"Outlander PHEV": 99,
"Outlander Sport": 33160,
},
Nissan: {
"370Z": 4614,
Altima: 254996,
Armada: 35667,
Frontier: 74360,
"GT-R": 578,
Juke: 10157,
Leaf: 11230,
Maxima: 67627,
Murano: 76732,
NV: 17858,
NV200: 18602,
Pathfinder: 81065,
Quest: 4950,
Rogue: 403465,
Sentra: 218451,
Titan: 52924,
Versa: 106772,
Xterra: 1,
},
Porsche: {
"911": 8970,
Boxster: 2287,
Cayenne: 13203,
Cayman: 2800,
Macan: 21429,
Panamera: 6431,
},
Smart: { Fortwo: 3071 },
Subaru: {
BRZ: 4131,
Crosstrek: 110138,
Forester: 177563,
Impreza: 117401,
Legacy: 49837,
Outback: 188886,
},
Tesla: { "Model 3": 2320, "Model S †": 28800, "Model X †": 24000 },
Toyota: {
"4Runner": 128296,
"86/Scion FR-S": 6846,
Avalon: 32583,
Camry: 387081,
"C-HR": 25755,
Corolla: 329196,
"FJ Cruiser": 4,
Highlander: 215775,
"Land Cruiser": 3100,
Mirai: 1838,
Prius: 108662,
RAV4: 407594,
Sequoia: 12156,
Sienna: 111489,
Tacoma: 198124,
Tundra: 116285,
Venza: 14,
Yaris: 44380,
},
Volkswagen: {
Atlas: 27119,
Beetle: 15166,
CC: 1355,
Eos: 1,
Golf: 68978,
Jetta: 115807,
Passat: 60722,
Tiguan: 46983,
Touareg: 3545,
},
Volvo: { S60: 16825, S80: 7, S90: 11090, XC60: 22516, XC90: 30996 },
};
function processData(data) {
var treeData = [];
var smallBrands = { name: "Other", children: [] };
for (var brand in data) {
var brandData = { name: brand, children: [] };
var brandTotal = 0;
for (var model in data[brand]) {
brandTotal += data[brand][model];
}
for (var model in data[brand]) {
// do not add very small
if (data[brand][model] > 100) {
brandData.children.push({ name: model, count: data[brand][model] });
}
}
// add to small brands if total number less than
if (brandTotal > 100000) {
treeData.push(brandData);
} else {
smallBrands.children.push(brandData);
}
}
treeData.push(smallBrands);
return treeData;
}
// create chart
var chart = am4core.create(chartdiv, am4charts.TreeMap);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
chart.padding(0, 0, 0, 0);
chart.data = processData(data);
// only one level visible initially
chart.maxLevels = 1;
// define data fields
chart.dataFields.value = "count";
chart.dataFields.name = "name";
chart.dataFields.children = "children";
chart.homeText = "SUNSHINE CAR BRANDS 2020";
// enable navigation
chart.navigationBar = new am4charts.NavigationBar();
// level 0 series template
var level0SeriesTemplate = chart.seriesTemplates.create("0");
level0SeriesTemplate.strokeWidth = 2;
// by default only current level series bullets are visible, but as we need brand bullets to be visible all the time, we modify it's hidden state
level0SeriesTemplate.bulletsContainer.hiddenState.properties.opacity = 1;
level0SeriesTemplate.bulletsContainer.hiddenState.properties.visible = true;
// create hover state
var hoverState = level0SeriesTemplate.columns.template.states.create("hover");
// darken
hoverState.adapter.add("fill", (fill, target) => {
return am4core.color(am4core.colors.brighten(fill.rgb, -0.2));
});
// add logo
var image = level0SeriesTemplate.columns.template.createChild(am4core.Image);
image.opacity = 0.15;
image.align = "center";
image.valign = "middle";
image.width = am4core.percent(80);
image.height = am4core.percent(80);
// add adapter for href to load correct image
image.adapter.add("href", (href, target) => {
var dataItem = target.parent.dataItem;
if (dataItem) {
return "img/bgimg/" + dataItem.treeMapDataItem.name.toLowerCase() + ".png";
}
});
// level1 series template
var level1SeriesTemplate = chart.seriesTemplates.create("1");
var bullet1 = level1SeriesTemplate.bullets.push(new am4charts.LabelBullet());
bullet1.locationX = 0.5;
bullet1.locationY = 0.5;
bullet1.label.text = "{name}";
bullet1.label.fill = am4core.color("#ffffff");
level1SeriesTemplate.columns.template.fillOpacity = 0;
// level2 series template
var level2SeriesTemplate = chart.seriesTemplates.create("2");
var bullet2 = level2SeriesTemplate.bullets.push(new am4charts.LabelBullet());
bullet2.locationX = 0.5;
bullet2.locationY = 0.5;
bullet2.label.text = "{name}";
bullet2.label.fill = am4core.color("#ffffff");
}// end function
/*Function - Load Energy Usage Supply*/
function load_energy_sunshine_map(chartdiv="chartdiv"){
// Create a container
var container = am4core.create("container1", am4core.Container);
container.width = 650;
container.height = 450;
// Create a container child
var rect = container.createChild(am4core.Rectangle);
rect.width = 648;
rect.height = 448;
am4core.useTheme(am4themes_animated);
var mapChart = am4core.create(chartdiv, am4maps.MapChart);
try {
mapChart.geodata = am4geodata_continentsLow;
} catch (e) {
mapChart.raiseCriticalError(
new Error('Map geodata could not be loaded. Please download the latest amcharts geodata and extract its contents into the same directory as your amCharts files.')
);
}
mapChart.projection = new am4maps.projections.Miller();
// prevent dragging
mapChart.seriesContainer.draggable = false;
mapChart.seriesContainer.resizable = false;
// prevent zooming
mapChart.minZoomLevel = 1;
// countries
var countriesSeries = mapChart.series.push(new am4maps.MapPolygonSeries());
countriesSeries.useGeodata = true;
countriesSeries.mapPolygons.template.fill = am4core.color("#47c78a");
countriesSeries.mapPolygons.template.stroke = am4core.color("#47c78a");
var colorSet = new am4core.ColorSet();
var polygonTemplate = countriesSeries.mapPolygons.template;
// night series
var nightSeries = mapChart.series.push(new am4maps.MapPolygonSeries());
nightSeries.ignoreBounds = true;
var night = nightSeries.mapPolygons.create();
night.fill = am4core.color("#000000");
night.fillOpacity = 0.7;
night.interactionsEnabled = false;
night.stroke = am4core.color("#000000");
night.strokeOpacity = 0;
// images series
var imagesSeries = mapChart.series.push(new am4maps.MapImageSeries());
var tooltip = imagesSeries.tooltip;
tooltip.label.padding(15, 15, 15, 15);
tooltip.background.cornerRadius = 25;
// sun
var sun = imagesSeries.mapImages.create();
var suncircle = sun.createChild(am4core.Circle);
suncircle.radius = 10;
suncircle.fill = am4core.color("#ffba00");
suncircle.strokeOpacity = 0;
sun.filters.push(new am4core.BlurFilter());
// graticule
var graticuleSeires = mapChart.series.push(new am4maps.GraticuleSeries());
graticuleSeires.mapLines.template.stroke = am4core.color("#ffffff");
graticuleSeires.fitExtent = false;
// add slider to chart container in order not to occupy space
var slider = mapChart.chartContainer.createChild(am4core.Slider);
slider.start = 0.5;
slider.valign = "bottom";
slider.padding(0, 30, 0, 80);
slider.background.padding(0, 30, 0, 80);
slider.marginBottom = 15;
slider.events.on("rangechanged", function () {
updateDateNight(new Date().getTime() + (slider.start - 0.5) * 1000 * 60 * 60 * 24 * 2 * 2);
});
function updateDateNight(time) {
var sunPosition = solarPosition(time);
sun.latitude = sunPosition.latitude;
sun.longitude = sunPosition.longitude;
sun.deepInvalidate();
night.multiPolygon = am4maps.getCircle(sunPosition.longitude + 180, -sunPosition.latitude, 90);
}
// all sun position calculation is taken from: http://bl.ocks.org/mbostock/4597134
var offset = new Date().getTimezoneOffset() * 60 * 1000;
function solarPosition(time) {
var centuries = (time - Date.UTC(2000, 0, 1, 12)) / 864e5 / 36525, // since J2000
longitude = ((am4core.time.round(new Date(time), "day", 1).getTime() - time - offset) / 864e5) * 360 - 180;
return am4maps.geo.normalizePoint({ longitude: longitude - equationOfTime(centuries) * am4core.math.DEGREES, latitude: solarDeclination(centuries) * am4core.math.DEGREES });
}
// Equations based on NOAA’s Solar Calculator; all angles in Amam4charts.math.RADIANS.
// http://www.esrl.noaa.gov/gmd/grad/solcalc/
function equationOfTime(centuries) {
var e = eccentricityEarthOrbit(centuries),
m = solarGeometricMeanAnomaly(centuries),
l = solarGeometricMeanLongitude(centuries),
y = Math.tan(obliquityCorrection(centuries) / 2);
y *= y;
return y * Math.sin(2 * l) - 2 * e * Math.sin(m) + 4 * e * y * Math.sin(m) * Math.cos(2 * l) - 0.5 * y * y * Math.sin(4 * l) - 1.25 * e * e * Math.sin(2 * m);
}
function solarDeclination(centuries) {
return Math.asin(Math.sin(obliquityCorrection(centuries)) * Math.sin(solarApparentLongitude(centuries)));
}
function solarApparentLongitude(centuries) {
return solarTrueLongitude(centuries) - (0.00569 + 0.00478 * Math.sin((125.04 - 1934.136 * centuries) * am4core.math.RADIANS)) * am4core.math.RADIANS;
}
function solarTrueLongitude(centuries) {
return solarGeometricMeanLongitude(centuries) + solarEquationOfCenter(centuries);
}
function solarGeometricMeanAnomaly(centuries) {
return (357.52911 + centuries * (35999.05029 - 0.0001537 * centuries)) * am4core.math.RADIANS;
}
function solarGeometricMeanLongitude(centuries) {
var l = (280.46646 + centuries * (36000.76983 + centuries * 0.0003032)) % 360;
return ((l < 0 ? l + 360 : l) / 180) * Math.PI;
}
function solarEquationOfCenter(centuries) {
var m = solarGeometricMeanAnomaly(centuries);
return (Math.sin(m) * (1.914602 - centuries * (0.004817 + 0.000014 * centuries)) + Math.sin(m + m) * (0.019993 - 0.000101 * centuries) + Math.sin(m + m + m) * 0.000289) * am4core.math.RADIANS;
}
function obliquityCorrection(centuries) {
return meanObliquityOfEcliptic(centuries) + 0.00256 * Math.cos((125.04 - 1934.136 * centuries) * am4core.math.RADIANS) * am4core.math.RADIANS;
}
function meanObliquityOfEcliptic(centuries) {
return (23 + (26 + (21.448 - centuries * (46.815 + centuries * (0.00059 - centuries * 0.001813))) / 60) / 60) * am4core.math.RADIANS;
}
function eccentricityEarthOrbit(centuries) {
return 0.016708634 - centuries * (0.000042037 + 0.0000001267 * centuries);
}
}//end function